<template>
    <div class="login-wrap">
        <div class="ms-login">
            <div class="ms-title">虚拟情景互动康复系统</div>
            <el-form ref="addUserForm" label-width="100px" class="ms-content" :rules="addUserFormRules" :model="addUserForm">
                <el-form-item label="用户名:" prop="userName">
                    <el-input v-model="addUserForm.userAcct"></el-input>
                </el-form-item>
                <el-form-item label="密码:" prop="password">
                    <el-input type="password" v-model="addUserForm.userPwd"></el-input>
                </el-form-item>
                <el-form-item label="手机号:" prop="telphone">
                    <el-input v-model="addUserForm.userPhone"></el-input>
                </el-form-item>
                <el-form-item label="家庭住址:" prop="userAddress">
                    <el-input v-model="addUserForm.userAddress"></el-input>
                </el-form-item>
            </el-form>
            <div >
                <el-button type="primary" icon="el-icon-switch-button" style="margin-left: 100px"   @click="systemexit()">退出系统</el-button>
                <el-button type="primary" icon="el-icon-check" style="margin-left: 95px" @click="submitForm"> 注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;册</el-button>
        </div>
                <p class="login-tips">所有权：希迪克（郑州）智能康复设备有限公司</p>
        </div>
    </div>
</template>

<script>
    import {addUser} from "../../../api/hospital/user";

    export default {
        data: function() {
            return {
                addUserForm:{},
                addUserFormRules: {
                    userAcct: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                        { pattern: /^[^\u4e00-\u9fa5]+$/, message: '不允许输入中文',trigger: 'blur'},
                        { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号',trigger: 'blur'},],
                    userPwd: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { pattern: /^[^\u4e00-\u9fa5]+$/, message: '不允许输入中文',trigger: 'blur'},
                        { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号',trigger: 'blur'},],
                },
            };
        },
        methods: {
            submitForm(){
                this.$refs['addUserForm'].validate((valid) => {
                    if (valid) {
                        //保存用户
                        addUser(this.addUserForm).then(res => {
                            if (res.data==1){
                                this.$message.success('保存成功,请登录');
                                this.$router.push("/login");
                            }else{
                                this.$message.error('保存失败');
                            }
                        }).catch(() => {
                                this.$message({
                                    message:'注册用户错误'
                                });
                            });;
                    }
                });
            },
            //退出系统
            systemexit(){
                /*调用c#中的方法，退出系统*/
                __winx.exit();
            }
        },
    };
</script>

<style scoped>
.login-wrap {
    position: relative;
    width: 2000px;
    height: 1000px;
    background-color: rgba(130, 149, 147, 0.59);
}
.ms-title {
    width: 100%;
    line-height: 60px;
    text-align: center;
    font-size: 30px;
    color: #ffffff;
    /*color: #fff;
    color: #79e03e;
    /*color: #e0da2f;*/
    border-bottom: 1px solid #ddd;
}
.ms-login {
    position: absolute;
    left: 42%;
    top: 40%;
    width: 450px;
    margin: -190px 0 0 -175px;
    border-radius: 9px;
    /*background: rgba(29, 44, 51, 0.5);*/
    /*background: rgba(89, 89, 89, 0.5);*/
    background: rgba(55, 89, 89, 0.6);
    overflow: hidden;
}
.ms-content {
    padding: 30px 20px;
}
.login-tips {
    text-align: center;
    font-size: 12px;
    line-height: 30px;
    color: #fff;
    margin-top: 20px;
}
/deep/  .el-form-item__label{
    color: #39f0e1;
    font-size:16px
}
</style>
